<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8"/>
	<title>改变样式</title>
<style>
    #div1{
    	width:200px;height:200px;background:pink;
    }
</style>
<script>
    //分开设置
    /*
    function toWidth(){
    	var oDiv = document.getElementById('div1');
    	oDiv.style.width = '400px';
    }
    function toHeight(){
    	var oDiv = document.getElementById('div1');
    	oDiv.style.height = '400px';
    }
    function toRed(){
    	var oDiv = document.getElementById('div1');
    	oDiv.style.background = 'red';
    }
    */

    //合并写
    function setStyle(name,value){
    	var oDiv = document.getElementById('div1');
    	//操作属性的方法有两种，一种是 .  一种是 []
    	//任何用.的都能用[]代替，反过来不一定行
    	//oDiv.style.name = value;   //在这里用.无效
    	oDiv.style[name] = value;    //要用[],其他所有用.号的地方都可以用[]符号
    }



</script>
</head>
<body>
    <input type="button" value="变宽"  onclick="setStyle('width','400px')"/>
    <input type="button" value="变高"  onclick="setStyle('height','400px')"/>
    <input type="button" value="变色"  onclick="setStyle('background','red')"/>
    <div id="div1"></div>

</body>
</html>
